<template>
   <div id="childdetail" >
       <child-detail class="detail" :prototype1="3" @titleClick="titleClick" :current-item="currentItem"></child-detail>
      <scroll class="content" ref="scroll" @scroll="contentScrollTop" :prototype1="3">
       <detail-swiper :topImages="topImages" ></detail-swiper>
       <detail-base-info :goods="goods"></detail-base-info>
       <shop-info :shop="shop"></shop-info>
        <detail-goods-info :detailInfo="detailInfo" @imageLoad="imageLoad"></detail-goods-info>
        <param-info :paramInfo="paramInfo" ref="params"></param-info>
        <detail-commentinfo :comment="comment" ref="comment"></detail-commentinfo>
        <goods-list :goods="recommends" ref="recommends">
        </goods-list>
      </scroll>
     <detail-botton-bar @addCart="addCart"></detail-botton-bar>
     <backtop @click.native="backtop" v-show="height" ></backtop>
   </div>
</template>

<script>
  import childDetail from "./childDetail/childDetail";
  import  {geDetail,Goods,Shop,GoodsParam,Comment,recommend} from "network/detail";
  import DetailSwiper from "./childDetail/DetailSwiper";
  import DetailBaseInfo from "./childDetail/DetailBaseInfo";
   import ShopInfo from "./childDetail/ShopInfo";
  import DetailGoodsInfo  from "./childDetail/DetailGoodsInfo";
  import ParamInfo from "./childDetail/DeatilParamInfo";
  import DetailCommentinfo from "./childDetail/DetailCommentinfo";
  import GoodsList from "components/content/goods/goodslist"
  import GoodsListItem from "components/content/goods/goodsitem"
  import Scroll from "../../components/common/scroll/Scroll"
  import DetailBottonBar from "./childDetail/DetailBottonBar";
  import  {debounce} from  "../../components/common/utils/utils.js"
  import backtop from "../../components/content/backtop/backtop";
  import {BackTop} from "../../common/minxin"
  import Toast from "../../components/content/Tost/Toast";
  export default {
     name: "Detail",
     mixins:[BackTop],
      data(){
        return{
          iid:null,
          topImages:[],
          goods:{},
          shop:{},
          detailInfo:{},
          paramInfo:{},
          comment:{},
          recommends:[],
          themeTopYs:[],
          getThemeTopYs:null,
          currentItem:0,
          isShow:false,

        }
      },

      components:{
        Scroll,
        childDetail,
      ShopInfo,
      DetailGoodsInfo,
      ParamInfo,
      DetailCommentinfo,
      DetailBottonBar,
      backtop,
      GoodsList,
      GoodsListItem,
      DetailSwiper,
        DetailBaseInfo,
        Toast
    },

    created() {
      //保存传入的iid
      this.iid=this.$route.params.iid
      //根据iid请求封装  数据
      geDetail(this.iid).then(res=>{
         //获取轮播图数据
        console.log(res);
        const  data=res.result
        this.topImages=data.itemInfo.topImages;
        //获取商品信息
        this.goods=new Goods(data.itemInfo,data.columns,data.shopInfo.services)
        //创建店铺信息
        this.shop=new Shop(data.shopInfo);
        //保存商品详情数据
        this.detailInfo=data.detailInfo;
        //获取参数信息
         this.paramInfo=new GoodsParam(data.itemParams.info,data.itemParams.rule);
         //获取评论信息 有些商品没有信息 做判断
         if(data.rate.cRate!==0){
           this.comment=new Comment(data.rate.list[0],data.rate.list[0].user)
         }
      })
      recommend().then(res=>{
        //根据最新的数据 对应的DOM是已经被渲染出来
        //单丝图片没有加载出来 offsetTop不对的时候 都是因为图片的问题
        console.log(res);
        this.recommends=res.data.list
      })
      //给getThemeTopy赋值
      this.getThemeTopYs=debounce(()=>{
        this.themeTopYs=[]
        this.themeTopYs.push(0)
        this.themeTopYs.push(this.$refs.params.$el.offsetTop)
        this.themeTopYs.push(this.$refs.comment.$el.offsetTop)
        this.themeTopYs.push(this.$refs.recommends.$el.offsetTop)
        console.log(this.themeTopYs);
      },1000)
    },
    methods:{
      imageLoad(){
        const refresh=debounce(this.$refs.scroll.refresh,100);
        this.$bus.$on("detailItemImgLoad",()=>{
          refresh();
        })
      },
      titleClick(index){
        //x,y,时间
        this.$refs.scroll.scrollTo(0,-this.themeTopYs[index],200)
      },
      contentScrollTop(position){

        //获取y
         const positionY=-position.y
        //和主题的y对比

        /*  for (let i in this.themeTopYs){
            console.log(i);
          }*/
        if (positionY>0&&positionY<=this.themeTopYs[1]){
             this.currentItem=0;
        }else if(positionY>this.themeTopYs[1]&&positionY<=this.themeTopYs[2]){
            this.currentItem=1
        }else if(positionY>this.themeTopYs[2]&&positionY<this.getThemeTopYs[3]){
            this.currentItem=2
        }else{
            this.currentItem=3
        }
         this.listenHeight(position);
      },
      back(){
        this.backtop();
      },
      //获取购物车信息
      addCart(){
         const product={
         }
        product.img=this.topImages[0];
        product.title=this.goods.title;
        product.desc=this.goods.desc;
        product.price=this.goods.oldPrice;
        product.iid=this.iid
        this.$store.dispatch('increate',product).then(res=>{
          console.log(this.$toast);
          this.$toast.show(res,2000)
        })

      }
    },

    mounted() {
        const refresh=debounce(this.$refs.scroll.refresh,100);
         this.$bus.$on("detailItemImgLoad",()=>{
           refresh();
       })
      this.getThemeTopYs();
    },

  }
</script>

<style scoped>
#childdetail{
  position: relative;
  z-index: 10;
  background-color: white;
  height: 100vh;
 overflow: hidden;
}
.detail{
  position: relative;
  z-index: 10;
  background-color: white;
}
.content{
  height: calc(100% - 44px);
  position: relative;
  left: 0;
  right: 0;
  bottom: 49px
;
}

</style>
